import CanvasManager from "./js/CanvasManager";
import Rect from "./js/obj/Rect";
// import Render  from "./js/Render";

// import CanvasEvent from "./js/CanvasEvent";

export class CreateCanvas extends CanvasManager {
  constructor(opt) {
    super(opt);
    this.scale = 1;
    this.moveCanvas = false;
    this.translateCanvas = false;
    this.nodeMove = () => {};
    this.created = () => {
      return Promise.resolve(true);
    };

    this.selectNode = () => {};
    this.createNode = () => {};

    this.event.register(this);

    this.event.bind("click", ({ event, pos }) => {
      switch (this.datas.currentCommand) {
        case "select":
          let checkedRects = [];
          this.datas.renderDatas.forEach((node) => {
            if (node.layer === this.datas.currentLayer) {
              if (node.checkRect(pos)) {
                checkedRects.push(node);
              }
            }
          });
          let node;
          if (checkedRects.length !== 0) {
            node = checkedRects[checkedRects.length - 1];

            // this.navTo(node.transform.x,node.transform.y,false)
            this.selectNode({ event, pos, node, checkedRects });
            node.showUISelect();
            this.RenderManager.render("ui-select");
          }

          break;
        case "create":
          let rect = this.createNode({
            transform: {
              x: pos.x / this.datas.worldScale.scale,
              y: pos.y / this.datas.worldScale.scale,
            },
            layer: "base",
          });

          this.datas.renderDatas.push(rect);
          this.RenderManager.renderAll(["grid"]);
          break;
      }
    });

    this.event.bind("mousedown", ({ event, pos }) => {
      this.translateCanvas = false;

      this.moveCanvas = true;
      if (event.event.button === 1) {

        this.translateCanvas = true;
      }

      this.datas.currentMousePos = this.event.posToCanvas(
        event.clientX,
        event.clientY,
        true
      );
    });
    this.event.bind("mousemove", ({ event, pos }) => {
      if (!this.moveCanvas) return;
      let movedPos = this.event.posToCanvas(event.clientX, event.clientY, true);
      let transform = {
        x: movedPos.x - this.datas.currentMousePos.x,
        y: movedPos.y - this.datas.currentMousePos.y,
      };

      let clzName = event.target.className.split(" ");

      if (
        this.datas.UIslectNode.selected.uid &&
        !this.translateCanvas &&
        (clzName.includes("node-select") || clzName.includes("ui-select"))
      ) {
        let trans = {
          x:
            this.datas.UIslectNode.selected.transform.x +
            transform.x / this.datas.worldScale.scale,
          y:
            this.datas.UIslectNode.selected.transform.y +
            transform.y / this.datas.worldScale.scale,
        };

        this.datas.UIslectNode.selected.transform.x =
          Math.floor(trans.x * 100) / 100;
        this.datas.UIslectNode.selected.transform.y =
          Math.floor(trans.y * 100) / 100;

        this.nodeMove({ event, pos });
        this.RenderManager.renderAll();
      }

      if (this.translateCanvas) {
        this.datas.worldTransForm = {
          x: this.datas.worldTransForm.x + transform.x,
          y: this.datas.worldTransForm.y + transform.y,
        };
        this.datas.worldTransForm.fixedTransform = {
          x: this.datas.worldTransForm.x,
          y: this.datas.worldTransForm.y,
        };
        this.RenderManager.renderAll();
      }

      this.datas.currentMousePos = this.event.posToCanvas(
        event.clientX,
        event.clientY,
        true
      );
      // if(this.moveCanvas){
      //   console.log(event)
      //   // let movedPos = this.event.posToCanvas(event.clientX,event.clientY,true)

      //   // this.datas.worldTransForm={x: this.datas.worldTransForm.x+transform.x,y:this.datas.worldTransForm.y+transform.y}

      //
      //
      // }
    });
    this.event.bind("mouseup", ({ event, pos }) => {
      this.moveCanvas = false;
    });
    this.event.bind("mouseleave", ({ event, pos }) => {
      this.moveCanvas = false;
    });
  }

  init() {
    this.registerRender();

    this.createUIelement();
    this.createCanvasHelp();
    this.event.bind("onCreated", () => {
      let req = this.created();
      req&& req.then
        ? req.then(() => {
            this.RenderManager.renderAll();
          })
        : this.RenderManager.renderAll();
    });
    this.event.on("onCreated");
  }
  appendRender(name, render) {
    this.RenderManager.setRender(name, render, true);
  }

  registerRender() {
    this.createCanvasNode("grid");

    this.RenderManager.customerRenders.forEach((key) => {
      this.createCanvasNode(key);
    });

    this.createCanvasNode();
  }
}
